import * as echarts from "echarts";
import type {Ref} from "vue";
import useVisualStore from "@/store/visualizationModule";

// 靓号占有信息
export const initStudyPanel = (studyPanelRef: Ref<HTMLElement>) => {
    // 基于准备好的dom，初始化echarts实例
    const visualStore = useVisualStore()
    let myChart = echarts.init(studyPanelRef.value);
    let data = visualStore.prettyOccupyData.percentageArr;
    let titleName = visualStore.prettyOccupyData.titleNameArr;
    let valData = visualStore.prettyOccupyData.occupyArr;
    let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];
    const option: any = {
        //图标位置
        grid: {
            top: "10%",
            left: "22%",
            bottom: "0%"
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                show: true,
                data: titleName,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",

                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 15,
                            // padding: 5,
                            align: "center",
                            width: 15,
                            height: 15
                        }
                    }
                }
            },
            {
                show: true,
                inverse: true,
                data: valData,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: 50,
                barWidth: 10,
                itemStyle: {
                    borderRadius: 20,
                    color: function (params: any) {
                        let num = myColor.length;
                        return myColor[params.dataIndex % num];
                    }
                },
                label: {
                    show: true,
                    position: ["50%", "0%"],
                    formatter: "{c}%"
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barCategoryGap: 50,
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        borderRadius: 15
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

export const initPrettyCountPanel = (prettyCountPanelRef: Ref<HTMLElement>) => {
    const visualStore = useVisualStore()
    // 1. 实例化对象
    let myChart = echarts.init(prettyCountPanelRef.value as HTMLElement);
    // 2. 指定配置项和数据
    let option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: '靓号数',
                type: 'pie',
                radius: ["10%", "70%"],
                center: ['50%', '42%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: visualStore.prettyCountData.realData
            }
        ],
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
}